<template>
    <div class="archive left">
    <el-timeline>
      <el-timeline-item
        v-for="(l, i) in state.articlesList"
        :key="l.year"
        placement="top"
        hide-timestamp
      >
        <h3 class="year">{{ l.year }}</h3>
 <!-- :color="item.state === 1 ? 'green' : item.state === 3 ? 'red' : ''" -->
        <el-timeline-item
          v-for="(item, index) in l.list"
          :key="item.id"
         
          placement="top"
          hide-timestamp
        >
          <router-link
            :to="`/articleDetail?article_id=${item._id}`"
            target="_blank"
          >
            <h3 class="title">{{ item.title }}</h3>
          </router-link>
          <p>{{ timestampToTime(item.create_time) }}</p>
        </el-timeline-item>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script lang="ts" setup>
import {GetArticleList} from '../api/api'
import {timestampToTime} from '../utils/utils'
import {ArchiveParams} from '../type/index'
import {reactive,onMounted} from "vue"
const state=reactive({
      isLoadEnd: false,
      isLoading: false,
      articlesList: [] as Array<any>,
      total: 0,
      params: {
        keyword: "",
        likes: "", // 是否是热门文章
        state: 1, // 文章发布状态 => 0 草稿，1 已发布,'' 代表所有文章
        article: 1,
        tag_id: "",
        category_id: "",
        pageNum: 1,
        pageSize: 10,
      } as ArchiveParams,
})
const handleSearch = async (): Promise<void> => {
        state.isLoading = true
        // console.log(state.params)
       const res = await GetArticleList(state.params)
       const data=res.data
      //  console.log("data:",data)
      //  console.log(JSON.parse(data))
      
      state.isLoading = false;
      state.articlesList = [...state.articlesList, ...data.list];
      console.log(state.articlesList[0])
      state.total = data.count;
      state.params.pageNum++; 

      if (data.list.length === 0 || state.total === state.articlesList.length) {
        // state.isLoadEnd = true;
        // document.removeEventListener("scroll", () => {});
        // window.onscroll = null;
      }
}
onMounted(()=>{
     handleSearch();
    //  state.articlesList = [
    //     {
    //       year: 2021,
    //       list: [
    //         {
    //           _id: 1,
    //           state: 1,
    //           title: "363456345",
    //           create_time: "2021-09-23 13:45:23",
    //         },
    //         {
    //           _id: 2,
    //           state: 3,
    //           title: "35",
    //           create_time: "2021-09-23 13:48:42",
    //         },
    //       ],
    //     },
    //     {
    //        year: 2022,
    //       list: [
    //         {
    //           _id: 0,
    //           state: 1,
    //           title: "363456345",
    //           create_time: "2022-09-23 13:45:23",
    //         },
    //         {
    //           _id: 2,
    //           state: 2,
    //           title: "35",
    //           create_time: "2022-09-23 13:48:42",
    //         },
    //       ],
    //     },
    //   ];
})
</script>

<style scoped lang="less">
.archive {
  padding: 40px 0;
  .year {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin-top: 0;
  }
  a {
    text-decoration: none;
  }

  .title {
    color: #333;
    &:hover {
      color: #1890ff;
    }
  }
}
</style>